<template>
    <div class="home_header">
        <ImgT src="/imgs/home/logo.png" class="header_logo" alt="" />
        <div class="header_right">
            <iconpark-icon name="search" style="margin-right: 14px;" size="28" @click="router.push({
                path: '/searchGames',
                query: { type: 'search' }
            })" />
            <iconpark-icon v-if="hasLogin" name="shoucang" style="margin-right: 14px;" size="28" @click="router.push({
                path: '/searchGames',
                query: { type: 'collect' }
            })" />
            <iconpark-icon name="KEFU2" style="margin-right: 14px;" size="28"
                @click="handleOpenLink(settings.serviceTelegram)" />
            <nut-popover overlay-class="hideColor" bg-color="transparent" v-model:visible="languagesShow"
                location="bottom-end">
                <template #reference>
                    <nut-animate type="ripple" action="click">
                        <ImgT :src="`/imgs/home/${lang.slice(0, 2)}.png`" class="header_languages"
                            style="width: 28px;height: 28px;" alt="" />
                    </nut-animate>
                </template>
                <template #content>
                    <div class="languages_popover">
                        <div class="languages_popver--item-container" v-for="(item, index) of settings.lang_list"
                            @click="() => chooseLanguages(item)" :key="index">
                            <div class="languages_popver--item">
                                <ImgT class="languages_img" :src="`/imgs/home/${item.name}.png`"
                                    style="width: 24px;height: 24px;" alt="" />
                                <div>{{ t(item.name) }}</div>
                            </div>
                            <div v-if="index !== 2" class="item_line"></div>
                        </div>
                    </div>
                </template>
            </nut-popover>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import pinia from '@/store/index';
import { storeToRefs } from 'pinia';
import { User } from '@/store/user';
import { Page } from '@/store/page';
import { useI18n } from 'vue-i18n';
import { i18n } from '@/languages';
import { Local } from "@/utils/storage";
import { useRouter } from "vue-router";
import { handleOpenLink } from '@/utils/publicMethods';
const router = useRouter();
const page = Page(pinia);
const { t } = useI18n();
const user = User(pinia);
const {
    hasLogin
} = storeToRefs(user);
const {
    lang,
    settings
} = storeToRefs(page);

// 语言选择
const languagesShow = ref(false)
const langObj: any = {
    'en-US': 'en-US',
    en: 'en-US',
    'en-AU': 'en-US',
    zh: 'zh-CN',
    'zh-CN': 'zh-CN',
    vi: 'vi-VN',
    'vi-VN': 'vi-VN',
    vn: 'vi-VN'
}
const chooseLanguages = async (item: any) => {
    languagesShow.value = false
    Local.set('lang', langObj[item.name])
    i18n.global.locale.value = langObj[item.name]
    await Page(pinia).setLang(langObj[item.name])
}

</script>

<style lang="scss" scoped>
.home_header {
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 14px;
    margin: 12px 0;

    .header_logo {
        width: 128px;
        height: 100%;
    }

    .header_right {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .header_languages {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            vertical-align: middle;
        }

    }
}

.languages_popover {
    width: max-content;
    border-radius: 12px;
    opacity: 0.9;
    background: #0B0C28;
    box-shadow: 0px 8px 16px 0px rgba(22, 22, 77, 0.50);
    backdrop-filter: blur(5px);
    padding: 5px 0;

    .languages_popver--item {
        height: 32px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        color: #FFFFFF;
        padding: 0 10px;

        .languages_img {
            width: 28px;
            height: 28px;
            margin-right: 8px;
        }
    }

    .item_line {
        // width: 41.1px;
        height: 1px;
        flex-grow: 0;
        margin: 5px auto 8px auto;
        opacity: 0.5;
        background-image: linear-gradient(to right, rgba(172, 177, 186, 0) 0%, #c8ccd2 50%, rgba(144, 149, 156, 0) 100%);
    }
}
</style>
